<template>
  <div class="product-smart-alerts" v-if="alerts.length > 0">
    <el-card class="alerts-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Bell /></el-icon>
          <span>产品智能提醒</span>
        </div>
      </template>
      <div class="alerts-content">
        <div 
          v-for="alert in alerts" 
          :key="alert.id"
          class="alert-item"
          :class="`alert-${alert.type}`"
          @click="handleAlertClick(alert)"
        >
          <el-icon :size="16" :color="getAlertColor(alert.type)">
            <component :is="getAlertIcon(alert.type)" />
          </el-icon>
          <div class="alert-text">
            <div class="alert-title">{{ alert.title }}</div>
            <div class="alert-description">{{ alert.description }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Bell, Warning, DocumentCopy, TrendCharts, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

interface Alert {
  id: string
  type: 'duplicate' | 'zeroStock' | 'lowStock' | 'inactive'
  title: string
  description: string
  priority: 'high' | 'medium' | 'low'
  products?: any[]
}

interface Props {
  products: any[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'alert-click', alert: Alert): void
}>()

// 计算智能提醒
const alerts = computed(() => {
  const alerts: Alert[] = []
  
  // 检查重复商品
  const duplicateProducts = findDuplicateProducts(props.products)
  if (duplicateProducts.length > 0) {
    alerts.push({
      id: 'duplicate-products',
      type: 'duplicate',
      title: `检测到 ${duplicateProducts.length} 个重复商品`,
      description: '存在相同SKU或名称高度相似的商品',
      priority: duplicateProducts.length > 3 ? 'high' : 'medium',
      products: duplicateProducts
    })
  }
  
  // 检查库存为0的商品
  const zeroStockProducts = props.products.filter(product => product.stock === 0)
  if (zeroStockProducts.length > 0) {
    alerts.push({
      id: 'zero-stock-products',
      type: 'zeroStock',
      title: `有 ${zeroStockProducts.length} 个商品库存为0`,
      description: '库存为0的商品可能影响销售，请及时补货',
      priority: zeroStockProducts.length > 5 ? 'high' : 'medium',
      products: zeroStockProducts
    })
  }
  
  // 检查库存不足的商品
  const lowStockProducts = props.products.filter(product => 
    product.stock > 0 && product.stock < product.minStock
  )
  if (lowStockProducts.length > 0) {
    alerts.push({
      id: 'low-stock-products',
      type: 'lowStock',
      title: `有 ${lowStockProducts.length} 个商品库存不足`,
      description: '库存低于安全库存的商品需要关注',
      priority: lowStockProducts.length > 3 ? 'high' : 'medium',
      products: lowStockProducts
    })
  }
  
  // 检查下架商品
  const inactiveProducts = props.products.filter(product => product.status === 'inactive')
  if (inactiveProducts.length > 0) {
    alerts.push({
      id: 'inactive-products',
      type: 'inactive',
      title: `有 ${inactiveProducts.length} 个下架商品`,
      description: '下架商品可能需要重新上架或清理',
      priority: 'low',
      products: inactiveProducts
    })
  }
  
  return alerts
})

// 查找重复商品
const findDuplicateProducts = (products: any[]) => {
  const duplicates: any[] = []
  const skuMap: Record<string, any[]> = {}
  
  // 按SKU分组
  products.forEach(product => {
    if (!skuMap[product.sku]) {
      skuMap[product.sku] = []
    }
    skuMap[product.sku].push(product)
  })
  
  // 找出重复的SKU
  Object.keys(skuMap).forEach(sku => {
    if (skuMap[sku].length > 1) {
      duplicates.push(...skuMap[sku])
    }
  })
  
  return duplicates
}

// 获取提醒图标
const getAlertIcon = (type: string) => {
  const icons: Record<string, any> = {
    duplicate: DocumentCopy,
    zeroStock: Warning,
    lowStock: TrendCharts,
    inactive: InfoFilled
  }
  return icons[type] || Bell
}

// 获取提醒颜色
const getAlertColor = (type: string) => {
  const colors: Record<string, string> = {
    duplicate: '#f5222d',
    zeroStock: '#fa8c16',
    lowStock: '#faad14',
    inactive: '#1890ff'
  }
  return colors[type] || '#1890ff'
}

// 处理提醒点击
const handleAlertClick = (alert: Alert) => {
  ElMessage.info(`查看${alert.title}`)
  emit('alert-click', alert)
}
</script>

<style scoped lang="scss">
.product-smart-alerts {
  margin-bottom: 20px;
  
  .alerts-card {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    
    :deep(.el-card__header) {
      padding: 12px 20px;
      border-bottom: 1px solid #ebeef5;
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #1f2d3d;
      }
    }
    
    .alerts-content {
      .alert-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &:hover {
          background-color: #f5f7fa;
          transform: translateX(2px);
        }
        
        &.alert-duplicate {
          border-left: 3px solid #f5222d;
        }
        
        &.alert-zeroStock {
          border-left: 3px solid #fa8c16;
        }
        
        &.alert-lowStock {
          border-left: 3px solid #faad14;
        }
        
        &.alert-inactive {
          border-left: 3px solid #1890ff;
        }
        
        .alert-text {
          flex: 1;
          
          .alert-title {
            font-weight: 500;
            color: #1f2d3d;
            margin-bottom: 4px;
            font-size: 14px;
          }
          
          .alert-description {
            font-size: 12px;
            color: #606266;
            line-height: 1.4;
          }
        }
      }
    }
  }
}
</style>